<template>
  <p-dialog :visible="visible" @close="$emit('close')">
    <div class="root" v-loading="loading">
      <template v-if="$store.state.user">
        <h2>请使用{{ payName }}扫码支付</h2>
        <div class="pay">
          <div :class="{item:true,active:type==='alipay'}" @click="type = 'alipay'">
            <img class="img" src="~/static/img/alipay.png" alt="">
            <span class="text">支付宝</span>
          </div>
          <div :class="{item:true,active:type==='wx'}" @click="type = 'wx'">
            <img class="img" src="~/static/img/wechat.png" alt="">
            <span class="text">微信</span>
          </div>
        </div>
        <div class="order-no">订单号：<span v-text="orderNum"></span></div>

        <div class="qrcode">
          <img width="180" height="180" :src="qrcode"/>
        </div>
        <div class="amount">
          <span style="color: #f0a854;font-size:30px;" v-text="discountAmount"></span>
          <span v-if="amount!=discountAmount">优惠：{{parseFloat(amount-discountAmount).toFixed(2)}}</span>
        </div>

        <div class="text-center">
          请使用<span style="color:red" v-text="payName"></span>，10分钟内完成支付
        </div>
        <div class="tips">
          <span>(支付成功后，请前往我的</span>
          <nuxt-link :to="{name:'my-order'}">订单</nuxt-link>
          <span>查看)</span>
        </div>
        <el-alert v-if="activeCode" style="margin-top:10px;margin-bottom:10px;" type="success" :closable="false">
          购买成功，激活码：<span style="color:red;" v-text="activeCode"></span>，<nuxt-link :to="{name:'my-order'}">点击查看订单记录</nuxt-link>
        </el-alert>
        <div class="text-center">
          <el-button :disabled="loading" :icon="loading?'el-icon-loading':'el-icon-refresh-right'" type="primary"
                     size="small" @click="createOrder()">刷新付款码
          </el-button>
          <div style="margin-top:10px;">
            <el-link class="discount-link" @click="inputCode()">输入折扣码</el-link>
          </div>
        </div>
      </template>
      <template v-else>
        <el-alert type="error" :closable="false" style="margin-top:20px;margin-bottom: 20px;">您还没有登录，请先登录！</el-alert>
        <div class="text-center">
          <el-button icon="el-icon-refresh" type="primary" @click="$emit('login')">点击登录</el-button>
        </div>
      </template>
    </div>
  </p-dialog>
</template>

<script>
import api from "@/utils/api";
import utils from "@/utils/utils";

export default {
  name: "QrcodeDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    package: {
      type: Object,
      default: null
    }
  },
  computed: {
    payName() {
      return {
        alipay: '支付宝',
        wx: '微信'
      }[this.type]
    }
  },
  data() {
    return {
      type: 'alipay',
      loading: false,
      orderNum: null,
      qrcode: null,
      activeCode: null,
      discountCodeId: null,
      discountCode:null,
      discountAmount:null,
      amount:null
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => this.createOrder());
      } else {
        window.clearTimeout(this._t);
      }
    },
    type(val) {
      this.$nextTick(() => this.createOrder());
    }
  },
  methods: {
    inputCode() {
      let self = this;
      this.$prompt('请输入折扣码', '提示', {inputValue:self.discountCode}).then(({value}) => {
        api.getCoupon(value).then(res => {
          if (res.code === 1) {
            self.discountCodeId = res.id;
            self.discountCode = value;
            //重新创建订单
            self.createOrder();
          } else {
            self.discountCodeId = null;
          }
          utils.showMessage(res);
        });
      }).catch(() => {
        self.discountCodeId = null;
        self.discountCode = null;
        self.createOrder();
      });
    },
    createOrder() {
      if (!this.package) {
        return;
      }
      this.loading = true;
      let self = this;
      window.clearTimeout(self._t);
      api.orderCreate(this.package.id, this.type,this.discountCodeId).then(res => {
        //存订单号和二维码连接
        self.qrcode = res.qrcode;
        self.orderNum = res.orderNum;
        //价格
        self.discountAmount = res.discountAmount;
        self.amount = res.amount;

        //开始查询订单的状态
        self.queryOrder();

      }).finally(() => this.loading = false);
    },
    queryOrder() {
      //轮询查询订单
      let self = this;
      api.orderQuery(this.orderNum).then(res => {
        if (res.paid) {
          self.activeCode = res.activeCode;
          self.$message.success('支付成功，可以前往我的订单查看激活码！');
        } else {
          let t = self._t;
          if (t) {
            window.clearTimeout(t);
          }
          self._t = setTimeout(() => self.queryOrder(), 1000);
        }
      });
    }
  }
}
</script>

<style scoped lang="less">
.root {
  padding: 30px;
}

.pay {
  .item {
    display: inline-block;
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.3s;
    user-select: none;
    padding: 0 10px;

    .img {
      width: 30px;
      vertical-align: middle;
    }

    .text {
      font-size: 14px;
      color: #333;
      margin-top: 10px;
    }
  }

  .active {
    border: 1px solid #2d8cf0;
    border-radius: 4px;

    .text {
      color: #2d8cf0;
    }
  }
}

.qrcode {
  text-align: center;
  margin: 10px auto;
}

.order-no {
  text-align: center;
}

.tips {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 12px;
}
.amount {
  text-align: center;
}
.discount-link{
  font-size: 12px;
  color:var(--color)!important;
}
</style>
